<template>
  <div class="article-detail">
    <div v-if="article" class="article-content">
      <h1>{{ article.title }}</h1>
      <div class="article-meta">
        <span class="date">{{ article.date }}</span>
        <span class="category">{{ article.category }}</span>
      </div>
      <img :src="article.image" :alt="article.title" class="featured-image" />
      <div class="content">
        <p>{{ article.fullContent }}</p>
        <h2>技术要点</h2>
        <ul>
          <li v-for="point in article.keyPoints" :key="point">{{ point }}</li>
        </ul>
        <h2>总结</h2>
        <p>{{ article.conclusion }}</p>
      </div>
    </div>
    <div v-else class="not-found">
      <h2>文章未找到</h2>
      <p>抱歉，您要查找的文章不存在。</p>
      <router-link to="/articles" class="back-link">返回文章列表</router-link>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const articles = [
  {
    id: 1,
    title: 'Vue3 组合式 API 最佳实践',
    date: '2024-01-15',
    category: '前端开发',
    image: 'https://picsum.photos/800/400?random=11',
    fullContent: 'Vue3 的组合式 API 为开发者提供了更灵活、更强大的代码组织方式。通过组合式 API，我们可以更好地复用逻辑代码，提高代码的可读性和可维护性。',
    keyPoints: [
      '使用 setup 函数组织逻辑',
      '合理使用 ref 和 reactive',
      '掌握 computed 和 watch 的使用场景',
      '利用生命周期钩子函数'
    ],
    conclusion: '组合式 API 是 Vue3 的核心特性之一，熟练掌握它能够显著提升开发效率和代码质量。'
  },
  {
    id: 2,
    title: '现代 CSS 布局技术详解',
    date: '2024-01-10',
    category: 'CSS',
    image: 'https://picsum.photos/800/400?random=12',
    fullContent: '随着 Web 技术的发展，CSS 布局方式也在不断演进。从传统的浮动布局到现代的 Flexbox 和 Grid，我们有了更多强大的工具来创建复杂的布局。',
    keyPoints: [
      'Flexbox 的一维布局优势',
      'Grid 的二维布局能力',
      '响应式设计的实现方法',
      '浏览器兼容性考虑'
    ],
    conclusion: '现代 CSS 布局技术为我们提供了更强大、更灵活的布局方案，合理运用这些技术可以创建出优秀的用户界面。'
  },
  {
    id: 3,
    title: 'JavaScript 性能优化指南',
    date: '2024-01-05',
    category: 'JavaScript',
    image: 'https://picsum.photos/800/400?random=13',
    fullContent: 'JavaScript 性能优化是前端开发中的重要课题。通过合理的优化策略，可以显著提升应用的响应速度和用户体验。',
    keyPoints: [
      '减少 DOM 操作',
      '合理使用事件委托',
      '避免内存泄漏',
      '使用性能分析工具'
    ],
    conclusion: '性能优化是一个持续的过程，需要结合具体场景选择最合适的优化策略。'
  }
]

const article = computed(() => {
  return articles.find(a => a.id === parseInt(route.params.id))
})
</script>

<style scoped>
.article-detail {
  max-width: 800px;
  margin: 0 auto;
}

.article-content {
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.article-content h1 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 2rem;
}

.article-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  color: #666;
}

.category {
  background: #3498db;
  color: white;
  padding: 0.3rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
}

.featured-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 2rem;
}

.content h2 {
  color: #2c3e50;
  margin: 2rem 0 1rem 0;
  border-bottom: 2px solid #3498db;
  padding-bottom: 0.5rem;
}

.content p {
  line-height: 1.8;
  margin-bottom: 1rem;
  color: #555;
}

.content ul {
  margin: 1rem 0;
  padding-left: 2rem;
}

.content li {
  margin-bottom: 0.5rem;
  color: #555;
}

.not-found {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.not-found h2 {
  color: #e74c3c;
  margin-bottom: 1rem;
}

.back-link {
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
}

.back-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .article-content {
    padding: 1rem;
  }
  
  .article-content h1 {
    font-size: 1.5rem;
  }
  
  .featured-image {
    height: 250px;
  }
}
</style>